<script lang="ts" setup >
import img1 from "../../assets/1.png"
import { ref } from "vue"
import img2 from "../../assets/2.png"
import img3 from "../../assets/3.png"
import img4 from "../../assets/4.png"
import img5 from "../../assets/5.png"
import img6 from "../../assets/6.png"
import { getgameList, getinformationarr, getseach } from "@/api/home"
import { onMounted } from "vue"
import { type Ref } from "vue"
import { useRouter } from "vue-router"
import { Search } from "@element-plus/icons-vue"
let arr: string[] = [img1, img2, img3, img4, img5, img6,]
let input = ref("")
let router = useRouter()
let gamelist1: Ref<any[]> = ref([])
let gamelist2: Ref<any[]> = ref([])
let informationarr: Ref<any[]> = ref([])
let iS: Ref<boolean> = ref(false)
onMounted(() => {
    getgameList().then(res => {
        // console.log(res.data);
        gamelist1.value = res.data
        // console.log(gamelist1.value);
    })
    getinformationarr().then(res => {
        informationarr.value = res.data
        // console.log(informationarr.value);
    })
})

function gameinfo() {
    router.push('/gameinfo')
}
function search() {
    // console.log(input.value);
    getseach(input.value).then(res => {
        console.log(res);
        if (!input.value) {
            iS.value = false
        }
        else {
            iS.value = true
            gamelist2.value = res.data
        }
        console.log(iS.value);
    })
}
</script>
<template>
    <div style="padding: 10px;overflow: auto;">

        <div>
            <div
                style=" width: 100%;display: flex;align-items: center;position: fixed;top:48px; z-index: 999999999999;background-color: #fff;">
                <el-input @input="search" prefix-icon="Search" v-model="input" clearable
                    style="width: 80%;margin: 10px 10px;" placeholder="搜索" />
                <el-icon style="margin: 10px 6px;" size="25px">
                    <ChatDotSquare />
                </el-icon>
            </div>

            <el-carousel style="margin-top: 40px;" indicator-position="outside" height="100px" type="card" :interval="2000"
                :autoplay="true">
                <el-carousel-item style="border-radius: 7%;" v-for="item in arr" :key="item">
                    <img :src="item" alt="加载图片失败">
                </el-carousel-item>
            </el-carousel>

            <div v-show="!iS" style="overflow: auto;">
                <div style="margin-bottom: 30px;">
                    <div style="display: flex;justify-content: space-between;margin-bottom: 15px;"><b
                            style="font-size: 20px;">最新资讯</b><span @click="gameinfo">查看更多 ></span></div>
                    <div>
                        <div v-for="it in informationarr" :key="it.id"
                            style="display: flex;margin-bottom: 20px; justify-content: space-between;">
                            <div style="display: flex; flex-flow: column wrap;justify-content: space-around;">
                                <div><b>{{ it.name + it.gamemsg }}</b></div>
                                <div>
                                    <span style="color: gray;">{{ it.time }}</span>
                                    <el-icon size="18px" style="top:3px;opacity: 0.5;margin: 0 5px;">
                                        <ChatDotSquare />
                                    </el-icon><b style="font-size: 11px;color: gray;opacity: 0.7;position: relative;right: 0px;
                                    top: -3px;">{{ it.news }}</b>
                                </div>

                            </div>
                            <img style="width: 50%;border-radius: 4%;" :src="it.img" alt="">
                        </div>
                    </div>
                </div>
            </div>

            <div v-show="!iS">
                <div style="display: flex;justify-content: space-between;margin-bottom: 15px;"><b
                        style="font-size: 20px;">本周特惠</b><span></span></div>
                <div v-for="ite in gamelist1" :key="ite.id" style="display: flex; margin-bottom: 20px;">
                    <img style="width: 35%; border-radius: 10%;" :src="ite.img" alt="">
                    <div style="margin-left: 20px; display: flex;flex-flow: column wrap;justify-content: space-around;">
                        <div><b>{{ ite.name }}</b></div>
                        <div>{{ ite.gamemsg }}</div>
                        <div>
                            <el-tag color="#fff" style="color: red;">{{ ite.type1 }}</el-tag>
                            <el-tag color="#fff" style="color: red;">{{ ite.type2 }}</el-tag>
                            <el-tag color="#fff" style="color: red;">{{ ite.type3 }}</el-tag>
                        </div>
                        <div>
                            <span style="font-size: 20px;font-weight: bold;color: red;margin-right: 5px;">￥ {{ ite.price }}
                            </span><span style="color: gray;"><del>{{ (ite.price / (ite.off / 100)).toFixed(0)
                            }}</del></span><el-tag color="red" style="color: #fff;width: 35px;height: 20px;margin-left: 5px;"> {{
    -((1 - ite.off / 100) * 100).toFixed(0) + '%' }}</el-tag>
                        </div>
                    </div>
                </div>
            </div>
            <div v-show="iS">
                <div style="display: flex;justify-content: space-between;margin-bottom: 15px;"><b
                        style="font-size: 20px;">搜索结果</b><span></span></div>
                <div v-for="ite in gamelist2" :key="ite.id" style="display: flex; margin-bottom: 20px;">
                    <img style="width: 35%; border-radius: 10%;" :src="ite.img" alt="">
                    <div style="margin-left: 20px; display: flex;flex-flow: column wrap;justify-content: space-around;">
                        <div><b>{{ ite.name }}</b></div>
                        <div>{{ ite.gamemsg }}</div>
                        <div>
                            <el-tag color="#fff" style="color: red;">{{ ite.type1 }}</el-tag>
                            <el-tag color="#fff" style="color: red;">{{ ite.type2 }}</el-tag>
                            <el-tag color="#fff" style="color: red;">{{ ite.type3 }}</el-tag>
                        </div>
                        <div>
                            <span style="font-size: 20px;font-weight: bold;color: red;margin-right: 5px;">￥ {{ ite.price }}
                            </span><span style="color: gray;"><del>{{ (ite.price / (ite.off / 100)).toFixed(0)
                            }}</del></span><el-tag color="red" style="color: #fff;width: 35px;height: 20px;"> {{
    -((1 - ite.off / 100) * 100).toFixed(0) + '%' }}</el-tag>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>
  
<style scoped lang="scss">
img {
    width: 100%;
    height: 100%;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}



.el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
}
</style>